<!--
 * @Description: 通用气泡
 * @Author: wxy单个吧
 * @Date: 2019-1-4
 * @LastEditTime: 2019-1-4
 * @LastEditors: Please set LastEditors
 -->
<template>
    <div v-show="show" class="bubble" :class="skin">
        <div @mouseenter="mouseenterBubb" @mouseleave="mouseleaveBubb" ref="dragBox" class="mess">
            <div><span @click="close" class="bubbleColose"><i class="el-icon-circle-close"></i></span></div>
            <component v-bind:is="content" :data="data"></component>
        </div>
        <hr ref="lineBox" class="line"/>
    </div>
</template>
<script>
    var lineStyle = (x1, y1, x2, y2) => {
        var lineWidth = 4;
        let rectX = x1 < x2 ? x1 : x2;
        let rectY = y1 < y2 ? y1 : y2;
        let rectWidth = Math.abs(x1 - x2);
        let rectHeight = Math.abs(y1 - y2);
        //弦长
        let stringWidth = Math.ceil(
            Math.sqrt(rectWidth * rectWidth + rectHeight * rectHeight)
        );
        let xPad = (rectWidth - stringWidth) / 2;
        let yPad = (rectHeight - lineWidth) / 2;
        let radNum = Math.atan2(y1 - y2, x1 - x2);
        return {
            width: stringWidth + "px",
            transform:
                "translate(" +
                (rectX + xPad) +
                "px, " +
                (rectY + yPad) +
                "px)" +
                " rotate(" +
                radNum +
                "rad)"
        };
    };
    var drag = (dragBox, lineBox, pos_x = 100, pos_y = 200, moveBox = dragBox) => {
        dragBox.onmousedown = e => {
            var disX = e.clientX - moveBox.offsetLeft;
            var disY = e.clientY - moveBox.offsetTop;
            document.onmousemove = e => {
                e.preventDefault();
                var l = e.clientX - disX;
                var t = e.clientY - disY;
                var x = document.documentElement.clientWidth - moveBox.offsetWidth;
                var y = document.documentElement.clientHeight - moveBox.offsetHeight;
                l = l < 0 ? 0 : l > x ? x : l;
                t = t < 0 ? 0 : t > y ? y : t;
                moveBox.style.left = l + "px";
                moveBox.style.top = t + "px";
                var endleft = l;
                var endtop = t + moveBox.offsetHeight;
                var lingstyle = lineStyle(pos_x, pos_y, endleft, endtop);
                lineBox.style.transform = lingstyle.transform;
                lineBox.style.width = lingstyle.width;
                return false;
            };
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
                return false;
            };
            return false;
        };
    };
    export default {
        data() {
            return {
                maxHeight: 4000, //最大显示高度
                maxNum: 40,//最多显示个数
                LEFT_DOWN: false
            };
        },
        props: {
            position: {
                type: Object,
                default() {
                    return undefined;
                }
            },
            offset: {
                type: Object,
                default() {
                    return {
                        offsetX: 40,
                        offsetY: 90
                    };
                }
            },
            content: {
                type: Object,
                default() {
                    return undefined;
                }
            },
            data: {
                type: Object,
                default() {
                    return undefined;
                }
            },
            value: {
                type: Boolean,
                default: false
            },
            area: {
                type: Object,
                default() {
                    return {
                        height: 130,
                        width: 200
                    };
                }
            },
            skin: {
                type: String,
                default() {
                    return "";
                }
            }
        },
        methods: {
            close() {
                this.$emit("input", false);
            },
            layout: function () {
                this.$refs.dragBox.style.width = this.area.width + "px";
                this.$refs.dragBox.style.height = this.area.height + "px";
            },
            init: function () {
                var winpos = viewer.scene.cartesianToCanvasCoordinates(this.position);
                if (winpos && this.$refs.dragBox) {
                    var start_x = winpos.x;
                    var start_y = winpos.y;
                    var end_x = start_x + this.offset.offsetX;
                    var end_y = start_y - this.offset.offsetY;
                    // if (this.$refs.dragBox.style.left == "0px") {
                    //     end_x = start_x + this.offset.offsetX;
                    // } else {
                    //     end_x = Number(this.$refs.dragBox.style.left.split("p")[0]);
                    // }
                    // if (this.$refs.dragBox.style.top == "0px") {
                    //     end_y = start_y - this.offset.offsetY;
                    // } else {
                    //     end_y = Number(this.$refs.dragBox.style.top.split("p")[0]) + Number(this.area.height);
                    // }
                    this.$refs.dragBox.style.left = end_x + "px";
                    this.$refs.dragBox.style.top =
                        Number(end_y) - Number(this.area.height) + "px";
                    var lingstyle = lineStyle(start_x, start_y, end_x, end_y);
                    this.$refs.lineBox.style.transform = lingstyle.transform;
                    this.$refs.lineBox.style.width = lingstyle.width;
                    drag(this.$refs.dragBox, this.$refs.lineBox, start_x, start_y);
                }
            },
            mouseenterBubb() {
                this.LEFT_DOWN = true;
            },
            mouseleaveBubb() {
                this.LEFT_DOWN = false;
            },
            postRender: function () {
                var that = this;
                // viewer.scene.camera.moveEnd.addEventListener(function() {
                //   that.showTag = that.canRender();
                //   if (that.showTag) {
                //     that.init();
                //   }
                // });

                // viewer.scene.camera.changed.addEventListener(function(percentage) {
                //   that.showTag = that.canRender();
                //   if (that.showTag) {
                //     that.init();
                //   }
                // });
                // var LEFT_DOWN=false;
                // var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                // handler.setInputAction(function(movement) {
                //     LEFT_DOWN=true;
                // }, Cesium.ScreenSpaceEventType.LEFT_DOWN );
                // handler.setInputAction(function(movement) {
                //     LEFT_DOWN=false;
                // }, Cesium.ScreenSpaceEventType.LEFT_UP );

                //每帧渲染结束监听
                viewer.scene.postRender.addEventListener(function (e) {
                    if (that.show && !that.LEFT_DOWN) {
                        that.init();
                    }
                });
            },
            canRender: function () {
            }
        },
        computed: {
            show() {
                return this.value;
            }
        },
        created: function () {
            this.$nextTick(() => {
                this.layout();
                this.init();
                this.postRender();
            });
        },
        mounted: function () {
        },
        watch: {
            show(val) {
                val && this.init();
            },
        },
    };
</script>

<style scoped>
    .bubble {
        position: fixed;
        left: 0;
        top: 0;
    }

    .bubbleColose {
        position: absolute;
        top: -1.6rem;
        right: -1.6rem;
        font-size: 2rem;
        color: aqua;
        cursor: pointer;
    }

    .bubble .mess {
        /* width: 200px;
        height: 130px; */
        position: fixed;
        left: 0px;
        top: 0px;
        /* background-color: #303133; */
        margin: 0;
        padding: 0;
        color: #fff;
        /* opacity: 0.65; */
        border: yellow 1px solid;
        /* padding: 10px 0px;  */
    }

    .bubble .line {
        position: fixed;
        width: 142px;
        background-color: yellow;
        height: 1px;
        border: none;
        margin: 0;
        padding: 0;
    }
</style>